<template>
	<div class="pages">
		<!-- 头部导航 -->
		<div class="header animate__fadeInDown">
			<button class="back-button fff" @click="router.back()">
				<span class="back-icon">←</span>
			</button>
			<span class="header-title fff">违禁词列表</span>
		</div>
		<div class="prohibited-page">
			<!-- <div v-if="form.bannedlist.length <= 0" class="empty">您还未添加违禁词！</div> -->
			<div class="list">
				<div class="forbiddenWords animate__fadeInUp" v-for="(item, index) in form.bannedlist" :key="index">
					<div class="origin">
						<div class="text"><span>违禁词</span>{{ item.origin }}</div>
						<img src="@/assets/images/shanchu.png" @click="removeTap(index)" />
					</div>
					<div class="target">平替词　|　<span>{{item.target}}</span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router'
import { useStore } from '@/stores/data'
const store = useStore();
const router = useRouter()


// 方法
const removeTap = (index: number) => {
	form.bannedlist.splice(index, 1);
	submitChanges()
};

// 本地表单（直接拷贝后端对象）
const form = reactive<any>({})
// 原始快照（用于 diff）
const original = ref<any>({})
// 深拷贝
const cloneDeep = (obj: any) => JSON.parse(JSON.stringify(obj))
// 初始化
onMounted(async () => {
  await store.getConfig()
  initForm()
})
function initForm() {
  const src = cloneDeep(store.userConfig || {})
  Object.keys(src).forEach(k => (form[k] = src[k]))
  original.value = cloneDeep(src)
}
// ============ 提交前的转换逻辑 ============

// 仅提交变化字段
function isEqual(a: any, b: any) {
  return JSON.stringify(a) === JSON.stringify(b)
}
function diffObject(curr: any, base: any) {
  const out: any = {}
  const keys = new Set([...Object.keys(curr || {}), ...Object.keys(base || {})])
  keys.forEach(k => {
    if (!isEqual(curr[k], base[k])) out[k] = curr[k]
  })
  return out
}

async function submitChanges() {
  // 先构造“提交时的规范对象”（对 *Txt / mainTxt / mainTxtSpace 执行转换）
  const current = cloneDeep(form)
  // 只提交有变化的字段
  const changes = diffObject(current, original.value)
  console.log('original', original)
  if (Object.keys(changes).length === 0) {
    // alert('没有改动需要提交')
    return
  }
  try {
    await store.updateConfig(changes)
    // alert('已提交修改')
    // 刷新基线
    Object.keys(current).forEach(k => (form[k] = current[k]))
    original.value = cloneDeep(current)
  } catch (e: any) {
    console.error(e)
    alert(e?.message || '提交失败')
  }
}
</script>

<style lang="scss" scoped>

.head {
	color: #ffffff;
}

.prohibited-page {
  padding: 22px 16px; // 38rpx / 1.7441 = 22px, 28rpx / 1.7441 = 16px
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  border-radius: 20px 20px 0 0; // 35rpx / 1.7441 = 20px
  background: #F2F6FF;
}

.empty {
  padding-top: 108px; // 188rpx / 1.7441 = 108px
  text-align: center;
}

.list {
  margin-bottom: 15px; // 26rpx / 1.7441 = 15px
  // height: 108px; // 189rpx / 1.7441 = 108px
  background: #FFFFFF;
  border-radius: 10px; // 17rpx / 1.7441 = 10px
  overflow: hidden;
  padding-left: 18px; // 31rpx / 1.7441 = 18px
  padding-right: 15px; // 26rpx / 1.7441 = 15px
  box-sizing: border-box;
  .forbiddenWords {
    // height: 58px; // 101rpx / 1.7441 = 58px
    // display: flex;
    // align-items: center;
    // margin-bottom: 8px; // 14rpx / 1.7441 = 8px
    // justify-content: space-between;
    border-bottom: 1px solid #F2F6FF; // 1rpx / 1.7441 = 0.57px (rounded to 1px)
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px; // 24rpx / 1.7441 = 14px
		color: #1A1A1A;
		line-height: 16px; // 28rpx / 1.7441 = 16px
		padding: 16px 0;
    .origin {
			display: flex;
    	align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;
			span {
				width: 47px;
				height: 24px;
				background: #FF3E3E;
				font-weight: 600;
				font-size: 12px;
				color: #FFFFFF;
				padding: 3px 6px;
				border-radius: 3px;
				line-height: 24px;
				margin-right: 5px;
			}
		}
    img {
      width: 16px; // 28rpx / 1.7441 = 16px
      height: 18px; // 31rpx / 1.7441 = 18px
    }
  }
	.target {
		width: 100%;
		background: #F2F6FF;
		border-radius: 8px;
		padding: 11px 10px;
		box-sizing: border-box;
		span {
			color: #525468;
		}
	}
}
</style>